<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view
    class="bg-linear overflow-hidden position-relative"
    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="page-top d-flex position-absolute align-items-center justify-content-between">
      <view class="d-flex align-items-center">
        <image src="/static/images/home/iconDingwei.png" alt="" class="block ding-wei" />
        <view>
          <van-dropdown-menu>
            <van-dropdown-item
              :modelValue="locationV"
              :options="locationArr"
              titleClass="select-location"
            />
          </van-dropdown-menu>
        </view>
      </view>
      <ShareBtn />
    </view>
    <view class="">
      <image src="/static/images/home/homeBg.png" alt="" class="block cjy-w100 home-bg" />
    </view>
    <view class="position-absolute home-cjy">
      <image src="/static/images/home/cjy.png" alt="" class="block" />
    </view>
    <view class="position-absolute home-button-wrapper cjy-w100" center>
      <van-button type="primary" round block class="home-button">
        <span class="d-flex align-items-center">
          <span class="mr-1">匹配产品</span>
          <van-icon name="play" color="#fff" class="icon-play" />
        </span>
        <view class="button-top position-absolute" />
      </van-button>
    </view>
    <view class="panel-wrapper home-panel">
      <van-row :gutter="[11, 13]">
        <van-col span="12">
          <Item
            title="常用工具"
            subTitle="实用工具集锦"
            bgColor="#FFF8EB"
            bgImg="url(static/images/home/bg1.png)"
          />
        </van-col>
        <van-col span="12">
          <Item
            title="产品大纲"
            subTitle="准入要求明细"
            bgColor="#EFF9FF"
            bgImg="url(static/images/home/bg2.png)"
          />
        </van-col>
        <van-col span="12">
          <Item
            title="发圈素材"
            subTitle="精英人设打造"
            bgColor="#EDFFFC"
            bgImg="url(static/images/home/bg3.png)"
          />
        </van-col>
        <van-col span="12">
          <Item
            title="更多功能"
            subTitle="正在开发中"
            bgColor="#F2F6FA"
            bgImg="url(static/images/home/bg4.png)"
          />
        </van-col>
      </van-row>
    </view>
  </view>
</template>

<script lang="ts" setup>
import Item from './components/item.vue'
import ShareBtn from './components/share.vue'

defineOptions({
  name: 'Home',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// const author = ref('菲鸽')
// const description = ref(
//   'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
// )
// 测试 uni API 自动引入

const locationV = ref(0)
const locationArr = [
  { text: '北京市', value: 0 },
  { text: '长沙市', value: 1 },
  { text: '岳阳市', value: 2 },
]

onLoad(() => {
  // console.log(author)
})
</script>

<style>
.page-top {
  top: 0;
  left: 0;
  z-index: 11;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  color: #fff;
  .ding-wei {
    width: 20px;
    height: 20px;
    margin-top: 1px;
  }
  .wechat {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }
  .select-location {
    font-size: 14px;
    color: #fff;
    background-color: transparent;
  }
  .van-dropdown-menu__bar {
    background: transparent;
    box-shadow: none;
  }
}
.home-bg {
  height: 445px;
}
.home-cjy {
  top: 132px;
  left: 30px;
  image {
    width: 188px;
    height: 98px;
  }
}
.home-button-wrapper {
  top: 280px;
  left: 0;
  /* left: 32px; */
  display: flex;
  .home-button {
    width: 311px;
    height: 52px;
    font-size: 20px;
    font-weight: 500;
    background: linear-gradient(172deg, #7aadff 5%, #2174fd 100%);
    border: 1px solid rgba(87, 131, 244, 1);
    border-radius: 29px;
    /* border-image: linear-gradient(168deg, rgba(87, 131, 244, 1), rgba(53, 129, 255, 1)) 1 1; */
    box-shadow:
      inset 0px 2px 1px 0px rgba(255, 255, 255, 0.22),
      inset 0px -2px 0px 0px rgba(14, 56, 125, 0.18),
      0px 8px 10px 1px rgba(20, 88, 201, 0.06),
      0px 3px 14px 2px rgba(20, 88, 201, 0.05),
      0px 3px 14px 2px rgba(20, 88, 201, 0.05);
    .icon-play {
      font-size: 12px;
    }
  }
  .button-top {
    top: 0;
    right: -1px;
    width: 304px;
    height: 16px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 37px;
  }
}
.home-panel {
  padding: 13px;
  margin-top: -90px;
}
</style>
